<#import "/spring.ftl" as spring />

<#include "/tags/userNotification.ftl">
<#include "/tags/userCompleteness.ftl">
<#include "/tags/userIntroTag.ftl">
<#include "/tags/friendList.ftl">
<#include "/tags/friendHintTag.ftl">
<#include "/tags/goalCloudTag.ftl">
<#include "/tags/updatedSinceTag.ftl">
<#include "/tags/topGoalsTag.ftl">
<#include "/tags/commonGoalsTag.ftl">
<#include "/tags/confirmBox.ftl">
<#include "/tags/activitiesTag.ftl">
<#include "/tags/mustDoGoalWidget.ftl">

<head>	     	
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/styles/style_dev.css">
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/scripts/cleditor/jquery.cleditor.css">
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/styles/ui-lightness/jquery-ui-1.8.5.custom.css">
	<link type="text/css" rel="stylesheet" href="${rc.contextPath}/styles/tools/jquery.autocomplete.css">
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/styles/jquery.alertbox.css">
	
	<script type="text/javascript" src="${rc.contextPath}/scripts/cleditor/jquery.cleditor.min.js"></script>     
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.mouse.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.position.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.slider.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.autocomplete.js"></script>
	
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.nonajax.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/widget.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/dwr/interface/GoalEntryManager.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.alertbox.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/page.userAS.js"></script>
	<title>${data.userInSession}'s account settings</title>
</head>

<div style="display:none;">
	<div id="sliderPopup" class="userSlider">
		<h1>Bạn đã hoàn thành được bao nhiêu % mục tiêu này?</h1>
		<p>Việc cập nhật số % hoàn thành của một mục tiêu giúp bạn kiểm soát được quá trình thực hiện mục tiêu của mình, hãy cập nhật nó ít nhất 1 tuần 1 lần.</p>
		<div class="slider">
			<div id="slider" rel="#sliderValue a"></div>
			<div id="sliderValue">
				<a>0%</a>
			</div>
			<div class="w4"></div>
			<div id="closeSlider">
				<a href="#" class="icon_1 btnUploadAvatar" style="margin-left:200px">Cập nhật</a>
			</div>
		</div>
	</div>
</div>

<@userNotification />  
<div class="w3"></div>

<div id="infomation">           
    <!-- user mustDoGoalWidget -->		
    <#if data.mustDoGoal??>
    	<@mustDoGoalWidget data.mustDoGoal.id data.mustDoGoal.title data.mustDoGoal.userCount/>
    </#if>	
	<div id="left">
		<div class="accSettingHead">
				<span></span>
				<h1>Tài khoản của bạn</h1>
				<p>Cập nhật chính xác các thông tin bạn lưu trữ trên iGoal để đảm bảo các quyền lợi cao nhất của bạn tại iGoal.</p>
		</div>
        <div class="accountSettingSaved">
			<div class="accSettingLabel">
            <label class="inputLabelGrey">&bull; Thông tin cơ bản</label>
            <a href="javascript:editAS(1)" class="inforWrite"></a>
           </div>
           <div class="clearthis"></div>
           <div class="accSettingData" id="bi">
           	<div class="accSettingRow">	
           		<span class="fl accDataL">Họ và tên:</span>
                <span class="fl accDataR">${data.userInfo.fullName}</span>
                <span class="fl accDataL">Ngày Sinh:</span>
                <span class="fl accDataR">${data.userInfo.birthdayDate} tháng ${data.userInfo.birthdayMonth} năm ${data.userInfo.birthdayYear}</span>
                <span class="fl accDataL">Giới Tính:</span>
                <span class="fl accDataR">${data.userInfo.male?string("Nam","Nữ")}</span>                
                <span class="fl accDataL">Email:</span>
                <span class="fl accDataR">${data.userInfo.email}</span>
             </div>
           </div>
           <div id="bi_placeholder" style="display: none;"></div>
           <div class="accSettingLabel">
            <label class="inputLabelGrey">&bull; Thông tin liên hệ</label>
            <a href="javascript:editAS(2)" class="inforWrite"></a>
           </div>
           <div class="clearthis"></div>
           <div class="accSettingData" id="ci">
           	<div class="accSettingRow">	
           		<#if data.userInfo.yahoo??>
           		<span class="fl accDataL">Yahoo ID:</span>
                <span class="fl accDataR">${data.userInfo.yahoo}</span>
                </#if>
                <#if data.userInfo.skype??>
                <span class="fl accDataL">Skype ID:</span>
                <span class="fl accDataR">${data.userInfo.skype}</span>
                </#if>
                <#if data.userInfo.facebook??>
                <span class="fl accDataL">Facebook:</span>
                <span class="fl accDataR">${data.userInfo.facebook}</span>
                </#if>
                <#if data.userInfo.mobile??>
                <span class="fl accDataL">ĐTDĐ</span>
                <span class="fl accDataR">${data.userInfo.mobile}</span>
                </#if>
                <#if data.userInfo.website??>
                <span class="fl accDataL">Website:</span>
                <span class="fl accDataR"><a href="${data.userInfo.website}">${data.userInfo.website}</a></span>
                </#if>
           	</div>
           </div>
           <div id="ci_placeholder" style="display: none;"></div>
           <div class="accSettingLabel">
            <label class="inputLabelGrey">&bull; Học hành và nghề nghiệp</label>
            <a href="javascript:editAS(3)" class="inforWrite"></a>
           </div>
           <div class="clearthis"></div>
           <div class="accSettingData" id="snc">
      		<#if data.schools??>
      		<#list data.schools as school>
           	<div class="accSettingRow">		
           		<span class="fl accDataL">Trường:</span>
                <span class="fl accDataR">${school.name}</span>
                <#if school.cityName??>
                <span class="fl accDataL">Tỉnh thành:</span>
                <span class="fl accDataR">${school.cityName}</span>
                </#if>
                <#if school.mainStudy??>
                <span class="fl accDataL">Chuyên ngành:</span>
                <span class="fl accDataR">${school.mainStudy}</span>
                </#if>
                <#if school.title??>
                <span class="fl accDataL">Trình độ:</span>
                <span class="fl accDataR">${school.title}</span>
                </#if>
                <#if (school.from??)>
                <#assign to=""/>
                <#if (school.to?? && school.to > 0)>
                	<#assign to=("đến " + school.to)/>
                <#elseif (school.to?? && school.to <= 0)>
                	<#assign to="đến hiện tại">
                </#if>
                <span class="fl accDataL">Niên khóa:</span>
                <span class="fl accDataR">${school.from} ${to}</span>
                </#if>
             </div>            
             </#list>
             </#if> 
             <#if data.companies??>
             <#list data.companies as company>
             <div class="accSettingRow">		
           		<span class="fl accDataL">Công ty:</span>
                <span class="fl accDataR">${company.name}</span>
                <#if company.cityName??>
                <span class="fl accDataL">Tỉnh thành:</span>
                <span class="fl accDataR">${company.cityName}</span>
                </#if>
                <#if company.field??>
                <span class="fl accDataL">Lĩnh vực:</span>
                <span class="fl accDataR">${company.field}</span>
                </#if>
                <#if company.title??>
                <span class="fl accDataL">Chức danh:</span>
                <span class="fl accDataR">${company.title}</span>
                </#if>
                <#if company.fromYear??>
                <#assign to=""/>
                <#if (company.toYear?? && company.toYear > 0)>
                	<#assign to=("đến " + company.toYear)/>
                <#elseif (company.toYear?? && company.toYear <= 0)>
                	<#assign to="đến hiện tại">
                </#if>
                <span class="fl accDataL">Thời gian:</span>
                <span class="fl accDataR">${company.fromYear} ${to}</span>
                </#if>
             </div>
             </#list>
             </#if>
           </div>
           <div id="snc_placeholder" style="display: none;"></div>
           <div class="accSettingLabel">
            <label class="inputLabelGrey">&bull; Nơi ở</label>
            <a href="javascript:editAS(4)" class="inforWrite"></a>
           </div>
           <div class="clearthis"></div>
           <div class="accSettingData" id="rt">
           	<div class="accSettingRow">	
           		<#if data.userInfo.address??>
           		<span class="fl accDataL">Địa chỉ:</span>
                <span class="fl accDataR">${data.userInfo.address}</span>
                </#if>
                <#if data.userInfo.district??>
                <span class="fl accDataL">Quận/Huyện:</span>
                <span class="fl accDataR">${data.userInfo.district}</span>
                </#if>
                <#if data.userInfo.cityName??>
                <span class="fl accDataL">Tỉnh thành:</span>
                <span class="fl accDataR">${data.userInfo.cityName}</span>
                </#if>
           	</div>
           </div>
           <div id="rt_placeholder" style="display: none;"></div>
           <div class="accSettingLabel">
            <label class="inputLabelGrey">&bull; Sở thích</label>
            <a href="javascript:editAS(5)" class="inforWrite"></a>
           </div>
           <div class="clearthis"></div>
           <div class="accSettingData" id="hb">
           	<div class="accSettingRow">	
           		<#if data.categories??>
           		<span class="fl accDataL">Lĩnh vực quan tâm:</span>
                <span class="fl accDataR">
                	<#list data.categories?keys as prop>
					    ${data.categories[prop]}<#if prop_has_next>, </#if>					    
					</#list>
                </span>
                </#if>
                <#if data.hobbies.music??>
                <span class="fl accDataL">Dòng nhạc, thể loại nhạc:</span>
                <span class="fl accDataR">
                	<#list data.hobbies.music?keys as prop>
                		${data.hobbies.music[prop]}<#if prop_has_next>, </#if>
                	</#list>
                </span>
                </#if>
                <#if data.hobbies.movie??>
                <span class="fl accDataL">Thể loại phim:</span>
                <span class="fl accDataR">
                	<#list data.hobbies.movie?keys as prop>
                		${data.hobbies.movie[prop]}<#if prop_has_next>, </#if>
                	</#list>
                </span>
                </#if>
                <#if data.hobbies.book??>
                <span class="fl accDataL">Thể loại sách, tên sách:</span>
                <span class="fl accDataR">
                	<#list data.hobbies.book?keys as prop>
                		${data.hobbies.book[prop]}<#if prop_has_next>, </#if>
                	</#list>
                </span>
                </#if>
                <#if data.hobbies.food??>
                <span class="fl accDataL">Món ăn khoái khẩu:</span>
                <span class="fl accDataR">
                	<#list data.hobbies.food?keys as prop>
                		${data.hobbies.food[prop]}<#if prop_has_next>, </#if>
                	</#list>
                </span>
                </#if>
                <#if data.hobbies.another??>
                <span class="fl accDataL">Sở thích khác:</span>
                <span class="fl accDataR">
                	<#list data.hobbies.another?keys as prop>
                		${data.hobbies.another[prop]}<#if prop_has_next>, </#if>
                	</#list>
                </span>
                </#if>
           	</div>
           </div>
           <div id="hb_placeholder" style="display: none;"></div>
           
			<div class="accSettingLabel">
				<label class="inputLabelGrey">&bull; Mật khẩu</label>
				<a href="javascript:editAS(6)" class="inforWrite"></a>
			</div>
			<div class="clearthis"></div>
			<div class="accSettingData" id="pw">
				<div class="accSettingRow">
					<span class="fl accDataL">Mật khẩu:</span>
					<span class="fl accDataR">&bull;&bull;&bull;&bull;&bull;&bull;</span>
				</div>
			</div>
			<div id="pw_placeholder" style="display: none;"></div>
           
        </div>
    </div>
    
    <div id="right">
		<@userCompleteness />		
		<@userIntro />
        <@friendList username="${data.userInSession}" />
        <@friendHint />
	</div>
</div>
